<template>
    <div class="subpage account-set-container">
        <ul class="set-list">
            <li @click="jumpView('editPhone')">
                <div class="set-tag-name">修改手机号</div>
                <div class="set-tag-info">
                    <span>{{showPhone}}</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li @click="jumpView('editPassword')">
                <div class="set-tag-name">修改登录密码</div>
                <div class="set-tag-info">
                    <span></span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li @click="jumpTradePassword">
                <div class="set-tag-name">{{isPayPwd == 99 ? '设置' : '修改'}}交易密码</div>
                <div class="set-tag-info">
                    <span></span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li v-if="unionId" @click="unbindWx">
                <div class="set-tag-name">解绑微信</div>
                <div class="set-tag-info">
                    <img src="../../../assets/img/wechart.png" alt="">
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li v-else @click="jumpView('bindWx')">
                <div class="set-tag-name">绑定微信</div>
                <div class="set-tag-info">
                    <img src="../../../assets/img/wx_icon.png" alt="">
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul>
        <div class="btn-box">
            <van-button round class="u-btn-default u-bg-gradient-light" @click="exitFn">退出</van-button>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { setTimeout } from 'timers';
export default {
    components: {
        [Dialog.name]:Dialog
       
    },
    data() {
        return {
            wxBindFlag: false,
            phone: '',
            showPhone: '',
            unionId: '',
            isPayPwd: ''
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        jumpView(viewName) { //页面跳转
            this.$router.push({name: viewName})
        },
        jumpTradePassword() { //跳转交易密码
            this.$router.push({
                path: '/my/accountSet/setTradePassword/' + this.isPayPwd
            })
        },
        getUserInfo() { //获取用户信息
            this.$api.get('/api/user/detail?noLoading')
                .then((res) => {
                    this.phone = res.data.phone;
                    this.showPhone = res.data.phone.substr(0, 3) + '****' + res.data.phone.substr(7);
                    this.unionId = res.data.unionId;
                    this.isPayPwd = res.data.isPayPwd;
                    this.$store.commit("setUserInfo", res.data);
                })
        },
        bindWx() { //绑定微信
            this.$router.push({
                name: 'bindWx'
            })
            // Dialog.confirm({
            //     title: '绑定微信账号',
            //     message: '绑定微信账号后，可以直接使用微信登录。'
            // }).then(() => {
            //     // on confirm
            //     // this.$api.get('/api/wx/toAuthorization')
            //     //     .then((res) => {
            //     //         window.location.href = res.data;
            //     //     })
                
            // }).catch(() => {
            //     // on cancel
            // });
        },
        unbindWx() { //解绑微信
            Dialog.confirm({
                title: '解绑微信账号',
                message: '解绑微信账号后，你将无法继续使用它登录，可使用其他方式登录。'
            }).then(() => {
                // on confirm
                this.$api.post('/api/wx/Unbind')
                    .then((res) => {
                        this.$tool.toast('已解绑', 800)
                        setTimeout(() => {
                            this.getUserInfo()
                        }, 1000)
                    })
            }).catch(() => {
                // on cancel
            });
        },
        exitFn() {
            Dialog.confirm({
                message: '确认退出登录？'
            }).then(() => {
                this.$tool.toast('已退出', 800);
                this.$store.commit("userLoginOut");
                setTimeout(() => {
                    this.$router.push({path: '/'});
                }, 1000);
            }).catch(() => {
                // on cancel
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .account-set-container {
        .set-list {
            width: 100%;
            background-color: #fff;
            li {
                width: 100%;
                padding: 20px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f2f2f2;
                font-size: 16px;
                color: #5D6164;
                &:last-child {
                    padding: 12px 16px;
                    border-bottom: none;
                }
                .set-tag-name {
                    width: 140px;
                }
                .set-tag-info {
                    display: flex;
                    flex: 1;
                    justify-content: flex-end;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    .arrow-right {
                        margin-left: 4px;
                    }
                }
            }
        }
        .btn-box {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            margin-top: 32px;
        }
    }
</style>